<template>
    <div class="book">
        <mt-navbar v-model="selected">
            <mt-tab-item id="1">历史</mt-tab-item>
            <mt-tab-item id="2">收藏</mt-tab-item>
        </mt-navbar>
        <div class="box">
            <div>登录后可以同步阅读历史</div>
            <div>登录</div>
        </div>
        <mt-tab-container v-model="selected">
            <mt-tab-container-item id="1">
               <div class="book-a">
                   <div class="book-a1"><img src="../../assets/images/5c06281622751-750x999.jpg" alt=""></div>
                   <div class="book-a2">
                       <h5>万丈光芒不及你</h5>
                       <p>传奇漫页<br>
                       阅读至：第33-34话<br>
                       更新至：236话
                       </p>
                   </div>
                   <div class="book-a3">续看</div>

               </div>
            </mt-tab-container-item>
            <mt-tab-container-item id="2">
                <div class="login"> 
                    <img src="../../assets/images/pic_login_null.png" alt="">
                    <p>主人请先登录</p>
                    <div class="login-a">登录</div>
                </div>
             
            </mt-tab-container-item>
        </mt-tab-container>
    </div>
</template>
<script>
export default{
    data(){
      return{
        selected:'1'
      }
    }
  }

</script>
<style>
.book .mint-navbar .mint-tab-item.is-selected{
    border: none;
}
.book .mint-navbar .mint-tab-item.is-selected{
    color: #ff7830;
}
.book .mint-tab-item-label{
    font-size:15px;
}
.book .box-a{
    background:#f8f8f8;
}
.book .box{
    display:flex;
    width: 100%;
    height: 2.8rem;
    line-height: 2.8rem;
    background: #f8f8f8;
    color:#999;
    justify-content: space-between;
    font-size: 14px;
    padding: none;
    padding-left: 0.2rem;
}
</style>
<style scoped>

.book .book-a{
    width: 100%;
   height: 9rem;
   margin: 0.5rem;
    
}
.book .book-a1{
    float: left;
    height: 93%;
    width: 22%;
     margin: 0.5rem;
}
.book .book-a1 img{
    height: 100%;
    width: 100%
}
.book .book-a2{
    float: left;
     margin: 0.5rem;
}
.book .book-a3{
 float: right;
 height:100%;
 line-height: 9rem;
 margin-right: 1rem;
}
.book .login{
    width: 50%;
   
    margin: auto;
    text-align: center;
    color: #999;


}
.book .login img{
    width: 100%;
}
.book .login-a{
   display: block;
    box-sizing: border-box;
    width: 4.66667rem;
    height: 1.85333rem;
    margin: .42667rem auto 0;
    color: #666;
    line-height: 1.85333rem;
    border-radius: 1.42667rem;
    border: 1px solid #ccc;
    background: transparent;
}
</style>
